{extend name="layout"}
{block name="title"}登录_社优保{/block}
{block name="body"}
<div class="login">
  <div class="login-text">
	<span>您好</span>
	<span>欢迎来到社优保~</span>
  </div>

  <div class="login-box">
	<div class="nav-box">
	  <div class="nav-idcard active">身份证号登录</div>
	  <div class="nav-phone nonact-phone">手机号登录</div>
	</div>

	<form data-login-form  onsubmit="return false"  data-auto-login="true"   onkeydown="if(event.keyCode==13)return false;" method="post"  autocomplete="off" data-callback="wxCallback">
		<div class="form-input">
		  <div class="form-idcard">
			<div class="input-box">
			  <span class="iconfont icon-shenfenzheng"></span>

			  <input  required pattern="^[\S]{4,}$" name="username"  autocomplete="off" placeholder="请输入身份证号">

			</div>
			<div class="input-box">
			  <span class="iconfont icon-mima"></span>
			  <input  required pattern="^[\s\S]{4,}$" name="password" maxlength="32" type="password" autocomplete="off" placeholder="请输入密码">

			</div>
		  </div>


		  <div class="form-phone" style="display: none">
			<div class="input-box">
			  <span class="iconfont icon-shouji"></span>
			  <input disabled  required pattern="^[\S]{4,}$" id="phone" name="mobile"  autocomplete="off" placeholder="请输入手机号">

			</div>
			<div class="input-box">
			  <span class="iconfont icon-mima"></span>
			  <input disabled  required pattern="^[\d]{4,}$" name="verify" maxlength="4" type="text" autocomplete="off" placeholder="请输入验证码">
			  <div class="phone-code">
				<span >获取验证码</span>
			  </div>

			</div>
		  </div>
		</div>



	  <div class="login-button">

		<input type="hidden" name="skey" required  value="{$loginskey|default=''}" >
		  <input type="hidden" name="platform" required  value="" >

		<button  type="submit" class="btn-login" data-form-loaded="立即登录">登录中</button>
		<a class="forget-pw" style="margin-right: 5px;">遇到问题？</a>

	  </div>
	  <div class="form-policy">
		<input  type="checkbox" checked onclick="checkboxOnclick(this)" />
		<input  required  type="text" name="policy"   placeholder="请确认社优保平台协议~" id="policy" value="1" style="display: none">
		<span>我已阅读并同意<a href="agreement.html">《社优保平台协议》</a></span>
	  </div>
	</form>

  </div>

	<div class="login-question" style="display: none">
		<img src="__ROOT__/static/personal/images/icon-tel.png">
		<p>遇到问题</p>
		<p class="consult">请联系客服<span>0311-85202890</span>进行咨询</p>
		<a class="btn-question" type="button" href="tel:0311-85202890">立即咨询</a>
		<button class="btn-question" onclick="layer.close(layer.index)">我知道了</button>
	</div>
</div>





{/block}
{block name="script"}
<script>
	$(function (){
		var Height = $('body').height();
		// 回到顶部
		$(window).resize(function () {
			// 回到顶部
			$('body').height(Height);
			// 回到顶部
		});
	})
</script>
<script>

	$(document).ready(function(){
		init()

		// $(".isDisplay").on("click","span",function(){
		// 	$(this).hide().siblings().show();
		// 	console.log($("[name='password'][type='password']").length)
		// 	if($("[name='password'][type='password']").length){
		// 		$("[name='password'][type='password']").attr("type","text")
		// 	}else{
		// 		$("[name='password'][type='text']").attr("type","password")
		// 	}
		// })
		$(".nav-box").on("click","div",function(){
			var className = $(this).prop("className")
			if(className.indexOf("active") < 0 ){
				if(className.indexOf("idcard")>-1){

					// 切换为身份证号
					$(this).addClass("active").removeClass("nonact-idcard").siblings().removeClass("active").addClass("nonact-phone")
					$(".form-idcard").show().siblings().hide()
					$(".form-idcard").children().find('input').removeAttr("disabled").val("")
					$(".form-phone").children().find('input').attr("disabled",true).val("")

				}else{
					$(this).addClass("active").removeClass("nonact-phone").siblings().removeClass("active").addClass("nonact-idcard")
					$(".form-phone").show().siblings().hide()
					$(".form-phone").children().find('input').removeAttr("disabled").val("")
					$(".form-idcard").children().find('input').attr("disabled",true).val("")
				}
			}


		})

		//获取验证码
		timer="";
		nums = 60;
		phoneFlag = true;
		$(".phone-code").on("click","span",function(){
			if(phoneFlag){
				var that = this
				//检测手机号码
				var isCheck = checkPhone("phone")
				if(!isCheck){
					return false
				}

				phoneFlag=false;



				// 发送验证码
				//个人 ：type 2;
				// verify_type:2(登录)    4（绑定手机号）
				$.ajax({
					url: '{:url("send_sms")}',
					data: {
						"mobile":$("input[name='mobile']").val(),
						"type":2,
						"verify_type":2
					},
					type: "post",
					success: function(res) {
						if(res.code == 1) {
							layer.msg("验证码发送成功，请等待~")
							// $.msg.alert("验证码发送成功，请等待~")

							// 验证码倒计时
							var code=$(that);
							timer=setInterval(function(){
								if(nums>0){
									nums--;
									code.html(nums+" 秒");
									code.addClass("gray-bg");
								}
								else{
									clearInterval(timer);
									nums=60;//重置回去
									phoneFlag = true
									code.html("获取验证码");
								}
							},1000)

						} else {
							phoneFlag = true
							layer.msg(res.info)
						}
					},
					error: function() {
						layer.msg("发送失败");
					}
				});


			}

		});

		$(".forget-pw").on("click",function(){

			var index = layer.open({
				type: 1,
				title: false,//数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
				area: '7.7rem',
				content: $('.login-question')
			});

		})


		$(".btn-login").on('keydown', function(e) {
			if(e.keyCode == 13) {
				e.preventDefault()
			}
		})
		document.onkeydown = function (e) { // 回车提交表单
			// 兼容FF和IE和Opera
			var theEvent = window.event || e;
			var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
			if (code == 13) {

				$(".btn-login").click();
			}
		}
	})

	function checkboxOnclick(checkbox) {

		if (checkbox.checked == true) {
			console.log(checkbox.checked)
			$("[name='policy']").val("1")
		} else {
			$("[name='policy']").val("")
		}
	}
	function init(){

		var is_wx = 2 //不在微信

		if(isWx()){
			is_wx = 1
		}

		$("[name='platform']").val(is_wx)

	}
	function wxCallback(res){

		if(res.code==1){
			window.location.href = res.data.url
		}else{
			$.msg.error(res.info)
		}
		return false

	}

</script>
{/block}

{block name="style"}
<style>
	body .layui-layer{
		border-radius: 0.267rem;
	}
</style>
{/block}
